<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>登录/注册</title>
    <link rel="stylesheet" type="text/css" href="../css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/login201906111921.css">
</head>
<body>
<div class="login" id="login" v-cloak>
    <div class="header">
        <template v-if="pageShow !== 'login'">
            <span class="header-fanhui" @click="pageShow = 'login'">返回</span>
        </template>
        <em>
            {{title}}
        </em>
    </div>
    <div class="login-logo"><img src="../image/login-logo.png"></div>

    <!-- 登录模块 -->
    <template v-if="pageShow === 'login'">
        <div class="login-input">
            <ul>
                <li><i>+86</i><input type="number" pattern="\d*" placeholder="请输入您的账号" v-model.trim="username"></li>
                <li><i><img src="../image/login-pwa.png"></i><input type="password" placeholder="请输入您的密码"
                                                                    v-model.trim="pwd"></li>
            </ul>
            <p><em @click="pageShow = 'forgetPassword'">忘记密码</em></p>
        </div>
        <button class="btn-login" @click="btnLogin()">登录</button>
        <div class="btn-register"><a @click="pageShow = 'register'">创建账号</a></div>
        <!-- <div class="login-qq"><a to=""><img src="../image/login-qq.png"><p>QQ登录</p></a></div> -->
        <div class="login-weixin"><a @click="btnWeChat()"><img src="../image/login-weixin.png">
            <p>微信登录</p></a></div>
    </template>

    <!-- 注册模块 -->
    <template v-else-if="pageShow === 'register'">
        <div class="login-input">
            <ul>
                <li>
                    <i>+86</i>
                    <input type="text" placeholder="请输入您的手机号" v-model.trim="username">
                </li>
                <li class="login-sms">
                    <i><img src="../image/login-sms.png"></i>
                    <input type="number" placeholder="请输入短信验证码" v-model.trim="code">
                    <button @click="sendCode && getCode()" :class="sendCode ? 'active': ''">{{codeMsg}}</button>
                </li>
                <li class="login-pwa">
                    <i><img src="../image/login-pwa.png"></i>
                    <input type="password" placeholder="密码由6-20英文字母、数字组成" v-model.trim="pwd">
                </li>
                <li class="login-paw">
                    <i><img src="../image/login-paw.png"></i>
                    <input type="password" placeholder="请再次填写密码" v-model.trim="twopwd">
                </li>
            </ul>
            <div class="login-agreement">
                <input type="radio" checked>
                <label @click="clickAgree()">我已同意<em>《去哪买协议》</em></label>
            </div>
        </div>
        <button class="btn-login btn-submit" @click="submit()">创建账号</button>
        <div class="login-bottom">
            <a @click="pageShow = 'login'">已有账号？去登录</a>
        </div>
    </template>

    <!-- 绑定手机号 -->
    <template v-else-if="pageShow === 'bindMobile'">
        <div class="login-input">
            <ul>
                <li>
                    <i>+86</i>
                    <input type="text" placeholder="请输入您的手机号" v-model.trim="username">
                </li>
                <li class="login-sms">
                    <i><img src="../image/login-sms.png"></i>
                    <input type="number" placeholder="请输入短信验证码" v-model.trim="code">
                    <button @click="sendCode && getCode()" :class="sendCode ? 'active': ''">{{codeMsg}}</button>
                </li>
            </ul>
        </div>
        <button class="btn-login btn-submit" @click="submit()">绑定手机号</button>

    </template>

    <!-- 忘记密码模块 -->
    <template v-else-if="pageShow === 'forgetPassword'">
        <div class="login-input">
            <ul>
                <li>
                    <i>+86</i>
                    <input type="text" placeholder="请输入您的手机号" v-model.trim="username">
                </li>
                <li class="login-sms">
                    <i><img src="../image/login-sms.png"></i>
                    <input type="number" placeholder="请输入短信验证码" v-model.trim="code">
                    <button @click="sendCode && getCode()" :class="sendCode ? 'active': ''">{{codeMsg}}</button>
                </li>
                <li class="login-pwa">
                    <i><img src="../image/login-pwa.png"></i>
                    <input type="password" placeholder="密码由6-20英文字母、数字组成" v-model.trim="pwd">
                </li>
                <li class="login-paw">
                    <i><img src="../image/login-paw.png"></i>
                    <input type="password" placeholder="请再次填写密码" v-model.trim="twopwd">
                </li>
            </ul>
        </div>
        <button class="btn-login" @click="submit()">确定</button>
    </template>

    <div class="toast-container" v-show="errMsg">
        <div class="toast"><span v-html="errMsg"></span></div>
    </div>
</div>

 <script type="text/javascript" src="../js/vue.js"></script>
<!--<script type="text/javascript" src="../js/vue.min.js"></script>-->
<script type="text/javascript" src="../js/axios.min.js"></script>
<script src="../js/fetch20190612.js"></script>
<script type="text/javascript" src="js/login201906261100.js"></script>
</body>
</html>
